<template>
  <view class="root-container">
    <view class="navbar-container">
      <u-navbar :title="title" :bgColor="headerBackGroudColor">
        <view slot="left">
          <view class="u-nav-slot" v-if="isShowLeft" @click="navigation">
            <u-icon name="arrow-left" size="19"></u-icon>
          </view>
          <slot name="navbarLeft" v-else />
        </view>
        <view slot="right">
          <slot name="navbarRight" />
        </view>
      </u-navbar>
    </view>
    <diy-tabbar :tabbarIsShow="tabbarIsShow">
      <view v-show="status == 'content'" class="content">
        <slot></slot>
      </view>
    </diy-tabbar>
    <view v-show="status == 'empty'" @click="refresh">
      <slot name="empty">
        <u-empty mode="data"></u-empty>
      </slot>
    </view>
    <view v-show="status == 'loading'">
      <slot name="loading">
        <u-loading-page :loading="true"></u-loading-page>
      </slot>
    </view>
    <view v-show="status == 'error'" @click="refresh">
      <slot name="error">
        <u-empty mode="data"></u-empty>
      </slot>
    </view>
  </view>
</template>

<script>
import DiyTabbar from "../diy-tabbar/diy-tabbar.vue";

export default {
  name: "DiyContainer",
  components: { DiyTabbar },
  props: {
    tabbarIsShow: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ""
    },
    isShowLeft: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    status: {
      type: String,
      default: "content"
    },
    headerVisable: {
      type: Boolean,
      default: false
    },
    headerBackGroudColor: {
      type: String,
      default: "ffffff"
    },
    headerBackgroundImage: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      error: "网络错误,点击重试",
      empty: "暂无数据"
    };
  },
  methods: {
    refresh() {
      this.$emit("refresh");
    },
    navigation() {
      uni.navigateBack({
        delta: 1
      });
    },
    showError(error) {
      this.error = error;
    }
  }
};
</script>

<style scoped lang="scss">
.root-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .navbar-container {
    /deep/ .u-navbar {
      height: 88rpx;
    }
  }
  .content {
    position: relative;
    flex: 1;
  }
}
</style>
